<template>
  <view>
    <u-popup :show="show" @close="close" mode="bottom" round="20rpx">
      <view class="popup-main">
        <view class="popup-head">
          <view>请确认支付</view>
          <view>188金币</view>
        </view>
        <view class="popup-nav">
          <image src="../../../../static/icon/wallet/species.png" mode=""></image>
          <view class="nav-price">
            <view class="price-title">金币</view>
            <view>
              余额1000个
              <view class="price-label" @click="onRecharge">充值</view>
            </view>
          </view>
          <u-checkbox-group>
            <u-checkbox @change="payRadio = !payRadio" v-model="payRadio" :checked="payRadio" shape="circle"></u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="popup-label">
          <u-checkbox-group>
            <u-checkbox @change="radio = !radio" v-model="radio" :checked="radio" shape="circle"></u-checkbox>
          </u-checkbox-group>
          <view class="radio-agreement">我已阅读并同意
            <view>《红料星球用户购买协议》</view>
          </view>
        </view>
        <view class="popup-btn">
          <u-button text="立即支付" color="#2F7EFC" @click="onPay"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    props: ['show'], //todo 需要传入支付金币和总余额
    data() {
      return {
        payRadio: true,
        radio: true

      }
    },
    methods: {
      close() {
        this.$emit('popupClose', false)
      },
      onChangeAgree() {

      },
      onRecharge() {
        uni.navigateTo({
          url: '/pages/userPage/wallet'
        })
      },
      onPay() {
        if (!this.payRadio) {
          uni.showToast({
            title: '请选择支付方式',
            icon: 'none'
          })
        } else if (!this.radio) {
          uni.showToast({
            title: '请阅读并同意红料星球用户购买协议',
            icon: 'none'
          })
        } else {
          this.$emit('payState', true)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .popup-main {
    width: 750rpx;
    height: 628rpx;
    background: rgba(255, 255, 255);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    box-sizing: border-box;
    padding: 0 42rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .popup-head {
      width: 100%;
      height: 214rpx;
      border-bottom: 4rpx solid #e6e6e6;
      box-sizing: border-box;
      padding-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      :first-child {
        font-size: 36rpx;
        font-weight: 500;
        color: #313131;
      }

      :last-child {
        height: 84rpx;
        font-size: 60rpx;
        font-family: PingFang SC;
        line-height: 84rpx;
        color: #313131;
        margin-top: 20rpx;
      }
    }

    .popup-nav {
      width: 100%;
      height: 210rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      image {
        height: 100rpx;
        width: 100rpx;
      }

      .nav-price {
        margin-left: 6rpx;
        flex: 1;

        .price-title {
          height: 56rpx;
          font-size: 40rpx;
          font-weight: 500;
          line-height: 56rpx;
          color: #313131;
        }

        :last-child {
          height: 44rpx;
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          color: #909090;
          display: flex;

          .price-label {
            height: 44rpx;
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            color: #2F7EFC;
            margin-left: 20rpx;
          }
        }
      }

    }

    .popup-label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;

      .radio-agreement {
        display: flex;
        font-size: 28rpx;
        font-weight: 500;
        color: #313131;

        :first-child {
          color: #FF5353;
        }
      }
    }

    .popup-btn {
      width: 626rpx;
      height: 94rpx;
      margin-top: 20rpx;
    }
  }
</style>